<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
    <!-- 表单是让用户输入信息,和服务端交互.
    分成两个部分:
    表单域: 包含表单元素的区域. 重点是 form 标签.
    表单控件: 输入框, 提交按钮等. 重点是 input select textarea标签. -->
<body>
    form 标签-》描述了要把数据按照什么方式, 提交到哪个页面中.
    <!-- action设置发送到服务端的路径可以把表单控件的数据，发送到服务端 -->
    <form action="test.txt">
        文本框：<input type="text">
        <br>
        密码框：<input type="password">
        <br>
        上传文件：<input type="file">
        <br>
        
        单选：  
            男<input id="male" type="radio" name="sex">
            女<input id="female" type="radio" name="sex">
            name属性不一样的一个radio
            <input value="female" type="radio" name="123">
            <br>

        多选：  
            男  <input type="checkbox" name="sex" id="男">
            女  <input type="checkbox" name="sex" id="女">
            二椅子  <input type="checkbox" name="sex" id="二椅子">
                <br>

        下拉菜单：
            <select>
                <option>--地点--</option>
                <option>北京</option>
                <option>上海</option>
            </select>
            <br>

        文本域
        <textarea rows="2" cols="50">
            此处可以不写任何东西，打一个空格或者回车都会填充在文本框
        </textarea>
        <br>
        <textarea ></textarea>
        <br>

        label 标签<br>
        搭配 input 使用. 点击 label内容 也能选中对应的单选/复选框, 能够提升用户体验<br>
        for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应. (此时点击才是有用的<br>
        <div style="color: pink;">
            click here -》<label for="male">男</label>
        </div>
        
        普通按钮：<input type="button" value="点我一下试试？"> <br>
        提交按钮：<input type="submit" value="点我一下提交"><br>
        重置按钮：<input type="reset" value="点我重置"><br>

    </form>
</body>
</html>